<template>
	<div class="login_cards">
		<p class="card_title">{{action=="login"?'您好，欢迎登录！':'您好，欢迎注册！'}}</p>

		<div class="card_coat">
			<u-input class="input" v-model="form.name" type="number" placeholder="请输入账号"
				placeholder-style='color: #f86853' :customStyle="{ ...iptStyle }">
				<template slot="prefix">
					<view class="prefixStyle">
						<u-icon size="30"
							name="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/11/06/c190041aa36244e1844458f9cad28db8rsv1x787au.png"
							color="#f86853"></u-icon>
					</view>
				</template>
			</u-input>
			<!-- 密码 -->
			<u-input :password-icon="true" class="input" border="surround" type="password" v-model="form.password"
				placeholder="请输入密码" placeholder-style='color: #f86853' :customStyle="{ ...iptStyle }">
				<template slot="prefix">
					<view class="prefixStyle">
						<u-icon size="30"
							name="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/11/06/2567787a5eda469da5c3cdb024b8ecf2075fne3kke.png"
							color="#f86853"></u-icon>
					</view>
				</template>
			</u-input>
			<!-- 再次输入密码 -->
			<u-input v-if="action==='register'" class="input" border="surround" type="password"
				v-model="form.againPassword" placeholder="请再次输入密码" placeholder-style='color: #f86853'
				:customStyle="{ ...iptStyle }">
				<template slot="prefix">
					<view class="prefixStyle">
						<u-icon size="30"
							name="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/11/06/2567787a5eda469da5c3cdb024b8ecf2075fne3kke.png"
							color="#f86853"></u-icon>
					</view>
				</template>
			</u-input>
			<!-- 右下角 -->
			<p @click="toLogin" class="tips_under" v-if="action=='register'">已有帐号?</p>
			<p @click="toEdit" class="tips_under" v-if="action=='login'">忘记密码?</p>
			<view class="handle_login">
				<u-button class="handle_button" @click="handleAction" :custom-style="{...buttonStyle}"
					hover-class="none" plain>{{action=="login"?'登录':'注册'}}</u-button>
			</view>
			<view @click="toRegister" v-if="action=='login'" class="tips_go"><span>去注册</span></view>
		</div>
	</div>
</template>

<script>
	import sendVerifyCode from "@/mixins/SendVerifyCode";
	import {
		getUserInfo,
		loginByPhone,
		registerByPhone
	} from '@/api/user.js'
import { sendCode } from "../../api/api";
	export default {
		mixins: [sendVerifyCode],
		props: {
			action: String,
			isSelectRadio: Boolean
		},
		watch: {
			action: {
				deep: true,
				handler(val) {
					console.log(val);
				}
			}
		},
		data() {
			return {
				form: {
					name: uni.getStorageSync('userPhone') || '',
					password: '',
					againPassword: '',
				},
				iptStyle: {
					height: '80rpx',
					padding: '0 20rpx',
					margin: '40rpx 0',
					background: 'linear-gradient(to right,#fee7ec,#fff3f3)',
					border: 'none',
					color: '#f86853 !important',
					'border-radius': '30rpx',
				},
				button_active: 'button_active',
				buttonStyle: {
					width: '220rpx',
					border: '4rpx solid #f6c7bd',
					color: '#F86853',
					'border-radius': '30rpx',
					'font-size': '1.25rem',
					'font-weight': '500',
					'letter-spacing': '0.125rem'
				}
			}
		},
		methods: {
			async getCode() {
				let that = this;
				if (!that.form.name) return that.$util.Tips({
					title: '请输入手机号'
				});
				let result = this.isValidPhoneNumber(this.form.name)
				if (!result) return that.$util.Tips({
					title: '手机号格式不正确'
				});
				await sendCode(that.form.name).then(res => {
					that.$util.Tips({
						title: res.message
					});
					that.sendCode();
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				});
			},
			toEdit(){
				uni.navigateTo({
					url:'/pages/user/pwd_edit/index'
				})
			},
			toLogin() {
				this.$emit('toLogin')
			},
			toRegister() {
				this.form.password = ""
				this.$emit('toRegister')
			},
			handleAction() {
				if (!this.isSelectRadio) {
					wx.showToast({
						title: '请选择协议条款',
						icon: 'none'
					})
					return
				}
				if (this.action == "login") {
					let result = this.isValidPhoneNumber(this.form.name)
					if (!result) {
						uni.showToast({
							title: '手机号格式不正确',
							icon: 'none'
						})
						return
					}
					if (!this.isValidLength(this.form.password)) {
						wx.showToast({
							title: '密码必须大于6位',
							icon: 'none'
						})
						return
					}
					wx.showLoading()
					loginByPhone({
						phone: this.form.name,
						pwd: this.form.password,
						code:this.form.code
					}).then(res => {
						wx.showToast({
							title: "登录成功",
							icon: 'success'
						})
						this.$store.commit('LOGIN', {
							token: res.data.token
						});
						getUserInfo().then(res1=>{
							uni.setStorageSync('USER_INFO', res1.data)
						})
						uni.setStorageSync('userPhone', this.form.name)
						this.$store.commit("SETUID", res.data.uid);
						uni.switchTab({
							url:'/pages/tabBar/index'
						})
					}).catch(error => {
						wx.showToast({
							title: error,
							icon: 'none'
						})
					})
					wx.hideLoading()
				} else if (this.action == 'register') {
					if (this.form.password !== this.form.againPassword) {
						uni.showToast({
							title: '两次输入的密码不一致',
							icon: 'none'
						})
						return
					}
					if (!this.isValidLength(this.form.password) && !this.isValidLength(this.form.againPassword)) {
						wx.showToast({
							title: '密码必须大于6位',
							icon: 'none'
						})
						return
					}

					let result = this.isValidPhoneNumber(this.form.name)
					if (!result) {
						uni.showToast({
							title: '手机号格式不正确',
							icon: 'none'
						})
						return
					}
					registerByPhone({
						phone: this.form.name,
						pwd: this.form.password,
					}).then(res => {
						uni.showToast({
							title: '注册成功'
						})
						uni.setStorageSync('userPhone', this.form.name)
						this.$emit('toLogin')
					}).catch(error => {
						wx.showToast({
							title: error,
							icon: 'none'
						})
					})
					wx.hideLoading()
				}
			},
			isValidPhoneNumber(phoneNumber) {
				var pattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				return pattern.test(phoneNumber);
			},
			isValidLength(input) {
				const regex = /^.{6,}$/;
				return regex.test(input);
			}
		}
	}
</script>

<style scoped lang="scss">
	.login_cards {
		width: 100%;

		.card_title {
			margin: 50rpx 0;
			font-size: 1.6rem;
			font-weight: 550;
			font-family: Arial, sans-serif;
			letter-spacing: 6rpx;
		}

		.card_coat {
			position: relative;
			.editPassword{
				position: absolute;
				bottom: 150rpx;
				font-size: 24rpx;
				right: 0rpx;
			}


			.prefixStyle {}

			.tips_under {
				text-align: right;
				color: #959595;
				letter-spacing: 0.125rem;
			}

			.handle_login {
				display: flex;
				justify-content: center;
				margin: 30rpx 0;

				.handle_button {}
			}

			.tips_go {
				display: flex;
				justify-content: center;

				span {
					text-align: center;
					color: #f89f93;
					border-bottom: 4rpx solid #f5dcdb;
					padding-bottom: 4rpx;
					transition: color ease-in-out 0.1s, border-bottom ease-in-out 0.1s;
				}

				span:active {
					color: #f86853;
					border-bottom: 6rpx solid #f86853;
				}

			}


		}
	}
	
	
</style>